<template>
  <div class="cart">
    <h4>
      <span class="ed" v-if="!edit" @click="edita">编辑</span> 
      <span class="ed" v-else @click="edita">完成</span> 
      <span>购物车</span> 
    </h4>
    <ul class="cart">
      <li v-for="(item,index) in list" :key="index" >
        <div>
          <!-- <van-checkbox v-model="choice" checked-color="red"></van-checkbox> -->
          <van-checkbox v-model="item.checked" @click="choice(index)" checked-color="red"></van-checkbox>
          <img :src="item.pic" alt />
          <div>
            <p>{{ item.name }}</p>
            <p v-for="(p,index) in item.pro" :key="index">{{ p.name }}</p>
            <div>
              <p>￥{{ item.price }}</p>
              <div>
                <van-stepper v-model="item.num" @change="ch(index)" />
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>

   <div  class="van-submit-bar__bar" v-show="list.length>0">
      <van-checkbox v-model="allchecked" @click="all">全选</van-checkbox>
      <p class="total">合计:￥{{ $store.getters.hj }}</p>
      <p v-show="!edit" class="order">下单</p>
      <p v-show="edit" class="order" @click="delet">删除</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  compoents: {},
  data() {
    return {
      checked: false, //是否全选
      edit:false
    };
  },
  computed: {
    ...mapState({
      list: state => state.cart,
      t: state => state.title
    }),
    allchecked: {
      get: function() {
        return this.$store.getters.select;
      },
      set: function(v) {
        console.log(v);
        this.$store.commit("all", v);
      }
    }
  },
  methods: {
    choice(n) {
      console.log(this.list[n].checked);
      this.$store.commit("choice", { index: n, value: this.list[n].checked });
    },
    all(v) {
      console.log(v)
    },
    ch(n) {
      this.$store.commit("num", { index: n, value: this.list[n].num });
    },
    edita(){
      this.edit = !this.edit
    },
    delet(){
      this.$store.commit('delet')
    }
  },
  watch:{},
  created(){
       console.log(this.$store.getters.select);
  }
};
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.cart {
  width: 5.2rem;
}
.cart ul li {
  height: 1.6rem;
  display: flex;
  align-items: center;
  padding-left: 0.16rem;
  box-sizing: border-box;
  width: 5.2rem;
  position: relative;
  transition: all 0.5s;
}
.cart ul li > div {
  display: flex;
}
.van-checkbox {
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.cart li > div > img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  border-radius: 0.04rem;
  margin-left: 0.17rem;
}
.cart li > div > div:nth-last-child(1) {
  width: 3.09rem;
  height: 1.1rem;
  margin-left: 0.24rem;
}
.cart li > div > div:nth-last-child(1) > p:nth-of-type(1) {
  font-size: 0.18rem;
}
.cart li > div > div:nth-last-child(1) > p:nth-of-type(2) {
  font-size: 0.14rem;
  margin-top: 0.16rem;
  color: #b2b2b2;
}
.cart li > div > div:nth-last-child(1) > div:nth-of-type(1) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 0.17rem;
  width: 3.09rem;
  justify-content: space-between;
}
.cart li > div > div:nth-last-child(1) > div:nth-of-type(1) > p:nth-of-type(1) {
  font-size: 0.18rem;
  color: #d00000;
}
.van-stepper {
  font-size: 0;
  user-select: none;
}
.van-submit-bar {
  width: 100%;
  background: #ffffff;
}
.van-submit-bar__bar {
  position: fixed;
  left: 0rem;
  bottom: 0.5rem;
  display: flex;
  width: 5.2rem;
  height: 0.7rem;
  font-size: 0.16rem;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
}
h4 span{
  float: right;
  box-sizing: border-box;
  padding: 0.1rem 0.1rem 0rem 0.2rem;
}
.ed{
  color: red;
  float: left;
}
.order{
  background: red;
  width: 0.7rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  color: #ffffff;
  font-weight: 600;
}
.total{
  color: red;
}
</style>